<div [@routerTransition]>
  <nz-card [nzTitle]="l('ForgotPassword')">
    <form nz-form #forgotPassForm="ngForm" (ngSubmit)="save()" autocomplete="off">
      <nz-alert class="mb-md" nzType="info" nzCloseable [nzMessage]="l('SendPasswordResetLink_Information')" nzShowIcon>
      </nz-alert>

      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <input nz-input name="emailAddress" #emailAddressInput="ngModel" [(ngModel)]="model.emailAddress"
            [placeholder]="l('EmailAddress')" autoFocus required maxlength="255" type="email" email>
          <nz-form-explain *ngIf="emailAddressInput.control.dirty&&emailAddressInput.control.errors">
            <ng-container *ngIf="emailAddressInput.control.hasError('email')">{{l('NotEmail')}}</ng-container>
            <ng-container *ngIf="emailAddressInput.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row nzGutter="8">
        <nz-col nzSm="12">
          <button nz-button nzType="primary" type="submit" [nzLoading]="saving" [disabled]="!forgotPassForm.form.valid || saving"
            nzBlock>
            {{l("Submit")}}
          </button>
        </nz-col>
        <nz-col nzSm="12">
          <button nz-button nzType="default" type="button" [disabled]="saving" routerLink="/account/login" nzBlock>{{l("Back")}}</button>
        </nz-col>
      </nz-form-item>
    </form>
  </nz-card>
</div>
